<template>
  <div class="container index">
    <div class=" title">用户实名认证</div>
    <tip class="tip" ref="toptip">
      <div class="top-tip">{{mes}}</div>
    </tip>
    <div>
      <span class="name">身份证:</span><input type="text" placeholder="请输入身份证" class="nameInput" v-model.trim="number" @blur="outblur">
    </div>
    <div class="space">
      <div>
        <span class="name">手机号:</span><input type="text" placeholder="请输入手机号" class="idInput" v-model.trim="phone" @blur="outidinput">
      </div>
      <div>
        <span class="name">短信号:</span><input type="text" placeholder="请输入验证短信" class="mesInput" v-model.trim="phonemes" @blur="mesiput">
        <button type="button" class="checkPas" @click="checkmes" v-html="txt" ref="checkPas"></button>
      </div>
    </div>
    <div class="upload">
      <el-upload
        :limit="2"
        class="upload-demo"
        action="http://love-li.cn/user/saveIdNumberPicture.json"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="success"
        multiple
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary" class="btnUpData">长按上传</el-button>
      </el-upload>
    </div>
    <div class="loginWrap">
      <button type="button" class="btn" ref="login" @click="loginbtn" disabled="disabled">确认</button>
    </div>
    <div class="el-upload__tip">
      <p class="mes">* 请上传身份证正反面清晰照.</p>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../util/https'
  import {baseurl} from '../base/config'
  import tip from './top-tip/top-tip'
  import {addClass} from "../base/dom";
  export default {
    name: "index",
    created() {
      document.title = "用户实名认证"
    },
    data() {
      return {
        flag: false, //手机号码标记位
        idflag: false, //身份证标记位
        mesflag: false, //验证信息标记位
        countdown: 60,
        txt: "获取验证码",
        number: "", //身份证
        phonemes: "",          //手机提示信息
        phone: "",//手机号
        mes: "",    //提示信息,
        nub: 0,
        fileList: []
      }
    },
    components: {
      tip
    },
    methods: {
      success() {
        this.nub++;
        if (this.nub === 2) {
          const login = this.$refs.login;
          login.removeAttribute("disabled", "");
          addClass(login, "addcss")
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      checkmes() {
        //给他加禁止点击
        const val = this.$refs.checkPas;
        this.settime(val)
      },
      //获取倒计时
      settime(val) {
        let _this = this;
        if (this.countdown === 0) {
          val.removeAttribute("disabled");
          this.txt = "获取验证码";
          this.countdown = 60;
        } else {
          val.setAttribute("disabled", true);
          this.timer = setInterval(function () {
            _this.pulldown()
          }, 1000);
          //验证用户输入信息
          this.mesinfo();
        }
      },
      pulldown() {
        this.countdown--;
        this.txt = "重新发送(" + this.countdown + "s)";
        if (this.countdown === 0) {
          clearInterval(this.timer);
          this.txt = "获取验证码";
          const val = this.$refs.checkPas;
          val.removeAttribute("disabled");
        }
      },
      confirm: async function () {
        const url = baseurl + "/user/sendMessage.json";
        // console.log(typeof this.phone);
        let params = {
          phoneNumber: this.phone
        };
        const res = await http.post(url, params);
        console.log(res);
        if (res.data.code === 602) {
          this.mes = res.data.msg;
          const topTio = this.$refs.toptip;
          topTio.show();
          return;
        }
      },
      getLogin: async function () {
        const url = baseurl + "/user/saveIdNumber.json";
        let params = {
          idNumber: this.number
        };
        const res = await http.post(url, params);
        //  console.log(res);
        if (res.data.code === 0) {
          this.$router.push({
            name: "confirm",
          });
        }
      },
      //验证身份证输入框号码
      outblur() {
        if (!this.number) {
          this.mes = "身份证号码不能为空！";
          this.$refs.toptip.show();
          this.idflag = false;
          return
        } else {
          const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if (!this.number.match(reg)) {
            this.mes = "身份证号码格式不对！";
            const toptip = this.$refs.toptip;
            toptip.show();
            this.idflag = false;
            return
          } else {
            this.idflag = true;
          }
        }
      },
      //验证用户手机信息是否合法
      outidinput() {
        const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        this.phone = Number.parseInt(this.phone);
        if (!this.phone) {
          this.mes = "手机号码不能为空哦!!";
          this.phone = "";
          const topTip = this.$refs.toptip;
          topTip.show();
          this.flag = false;
          return
        } else {
          if (!reg.test(this.phone)) {
            this.mes = "手机号码格式不对哦！！";
            const topTip = this.$refs.toptip;
            topTip.show();
            this.flag = false;
            return
          } else {
            this.flag = true;
          }
        }
      },
      mesiput() {
        if (!this.phonemes) {
          this.mes = "验证短息不能为空哦!!";
          this.$refs.toptip.show();
          this.mesflag = false
        } else {
          this.mesflag = true
        }
      },
      //验证用户手机信息是否合法并且调用接口
      mesinfo() {
        this.confirm();
      },
      //确认页面
      loginbtn() {

        this.outblur();
        this.outidinput();
        this.mesiput();
        // //  console.log(1)
        // console.log(this.flag)
        // console.log(this.idflag)
        // console.log(this.mesflag)
        if (this.flag && this.idflag && this.mesflag) {
          this.dologin()
        } else {
          this.mes = "你的信息填写不齐全哦！";
          this.$refs.toptip.show();
        }
      },
      dologin: async function () {
        const url = baseurl + "/user/saveIdNumber.json";
        let params = {
          idNumber: this.number,
          verifyCode: this.phonemes,
          phoneNumber: this.phone,  //身份证号码
        };
        const res = await http.post(url, params);
        if (res.data.code === 0) {
          this.$router.push({
            path: '/',
          })
        }

        //  console.log(res);
        // if (res.data.code === 200) {
        //   this.$router.push({
        //     name: confirm
        //   })
        // } else {
        //   if (res.data.code === 510) {
        //     this.mes = res.data.message;
        //     this.$refs.toptip.show();
        //   } else if (res.data.code === 603) {
        //     this.mes = res.data.message;
        //     this.$refs.toptip.show();
        //   } else if (res.data.code === 604) {
        //     this.mes = res.data.message;
        //     this.$refs.toptip.show();
        //   } else if (res.data.code === 605) {
        //     this.mes = res.data.message;
        //     this.$refs.toptip.show();
        //   } else if (res.data.code === 606) {
        //     this.mes = res.data.message;
        //     this.$refs.toptip.show();
        //   }
        //
        // }
      }
    }

  }
</script>
<style scoped lang="less" type="text/less">
  .addcss {
    background: #449d44 !important;
  }

  .index {
    .top-tip {
      width: 100%;
      height: 1rem;
      background: #449d44;
      color: #fff;
      font-size: .35rem;
      line-height: 1rem;
    }
    .checkBox {
      width: 100%;
      height: 3rem;
      background: #449d44;
      text-align: center;
    }
    .upload-demo {
      height: 2.5rem;
      text-align: center;
    }
    .upBtn {
      text-align: center;
    }
    .btnUpData {
      background: #449d44;
      outline: none;
      border: none;
      border-radius: .1rem;
      height: .7rem;
      width: 2rem;
    }
    .checkPas {
      width: 2rem;
      height: .8rem;
      line-height: .3rem;
      border-radius: .22rem;
      padding: .2rem;
      background: #ccc;
      font-size: .2rem;
      /*border: 1px solid #ccc;*/
      outline: none;
      border: none;
    }
    .space {
      margin-bottom: .2rem;
    }
    .el-upload__tip {
      margin-top: .4rem;
      margin-left: .5rem;
    }
    .upload {
      text-align: center;
    }
    .upload {
      text-align: left;
      margin: 0 .5rem;
    }
    .tip {
      color: red;
      font-size: .35rem;
      text-align: center;
      height: .35rem;
      line-height: .35rem;
    }
    .title {
      text-align: center;
      font-size: .4rem;
      /*margin-top: .2rem;*/
      margin: .5rem 0 .2rem;
      color: #449d44;
    }
    .name {
      font-size: .3rem;
      padding-left: .3rem;
      margin-top: .3rem;

    }
    .nameInput {
      width: 4.5rem;
      height: .3rem;
      border-radius: .22rem;
      margin: 0 .3rem;
      padding: .25rem;
      color: black;
      border: 1px solid #ccc;
    }
    .idInput {
      width: 4.5rem;
      height: .3rem;
      border-radius: .22rem;
      margin-left: .3rem;
      padding: .25rem;
      color: black;
      border: 1px solid #ccc;
    }
    .mesInput {
      font-size: .22rem;
      width: 2rem;
      height: .3rem;
      border-radius: .22rem;
      margin-left: .3rem;
      padding: .25rem;
      color: black;
      border: 1px solid #ccc;
      margin-right: .15rem;
    }
    .mes {
      color: red;
      font-size: .26rem;
      line-height: .45rem;
    }
    .loginWrap {
      text-align: center;
      /*margin-top: .5rem;*/
      .btn {
        width: 5rem;
        height: .8rem;
        border-radius: .2rem;
        background: #ccc;;
        outline: none;
        border: none;
        color: #fff;
        font-size: .4rem;
        margin: 0 .5rem;
        text-align: center;

      }

    }

  }

</style>
